<template>
    <div class="intell">
        <div class="left">
            <div>
                <rejuhuanjing></rejuhuanjing>
            </div>
            <div>
                <chengxianggailan></chengxianggailan>
            </div>
            <div>
                <div class="top">
                    <xuexiao></xuexiao>
                </div>
                <div class="bottom">
                    <shenxuelv></shenxuelv>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="top">
                <qianruqushi></qianruqushi>
            </div>
            <div class="bottom">
                <qianchuqushi></qianchuqushi>
            </div>
        </div>
        <div class="right">
            <div>
                <ziranhuanjingshui></ziranhuanjingshui>
            </div>
            <div>
                <ziranhuanjingqi></ziranhuanjingqi>
            </div>
            <div>
                <ziranhuanjingtu></ziranhuanjingtu>
            </div>
        </div>
    </div>
</template>

<script>

    import rejuhuanjing from "./renjuhuanjing"
    import chengxianggailan from "./chengxianggailan"
    import xuexiao from "./xuexiao"
    import shenxuelv from "./shenxuelv"
    import qianruqushi from "./qianruqushi"
    import qianchuqushi from "./qianchuqushi"
    import ziranhuanjingshui from "./ziranhuanjingshui"
    import ziranhuanjingqi from "./ziranhuanjingqi"
    import ziranhuanjingtu from "./ziranhuanjingtu"

    export default {
        name: "Home",
        components: {
            rejuhuanjing,
            chengxianggailan,
            xuexiao,
            shenxuelv,
            qianruqushi,
            qianchuqushi,
            ziranhuanjingshui,
            ziranhuanjingtu,
            ziranhuanjingqi
        },
        data() {
            return {}
        }
    };
</script>

<style lang="scss" scoped>
    .intell {
        height: 100%;
        width: 100%;
        padding: 40px;
        /*background: red;*/
        display: flex;
        > .left {
            width: 35%;
            /*background: #00D3F8;*/
            display: flex;

            > div {
                /*flex: 1;*/
                &:nth-of-type(1) {
                    width: 36%;
                }
                &:nth-of-type(2) {
                    margin: 0 20px;
                    width: 43%;
                    padding: 0 40px;
                    /*background: red;*/
                }
                &:last-child {
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    > div {
                        flex: 1;
                        &:last-child {
                            margin-top: 40px;
                        }
                    }
                }
            }

        }
        > .center {
            width: 15%;
            margin: 0 40px;
            /*background: #8C2DFE;*/
            display: flex;
            flex-direction: column;
            > div {
                flex: 1;
                &:last-child {
                    margin-top: 40px;
                }
            }
        }
        > .right {
            /*width:50%;*/
            flex: 1;
            /*background: #9FD7E4;*/
            display: flex;
            >div{
                flex:1;
                &:nth-of-type(2){
                    margin: 0 40px;
                }
            }
        }
    }
</style>
